<template>
	<view>
		<!-- 导航栏 -->
		<view class="navBox">
			<image src="../../static/jia1.png"></image>
			<scroll-view style="white-space: nowrap;width: calc(100% - 66px);" scroll-x="true" @scrolltolower="warn">
				<text>推荐</text>
				<text>商城</text>
				<text>团购</text>
				<text>直播</text>
				<text>热点</text>
				<text>短剧</text>
				<text>抗疫</text>
				<text>关注</text>
				<text>朋友</text>
			</scroll-view>
			<image @click="jump(2)" src="../../static/sousuo.png"></image>
		</view>
		<!-- 视频区域 -->
		<view>
			<video @play="start" poster="../../static/1.png" loop="true" src="../../static/wei69-j5wn8.mp4" objectFit="fill"></video>
		</view>
		<view class="tool-box">
			<view class="tool-item">
				<image @click="changeImg" :src="zanImg"></image>
				<text style="margin: 0;">点赞</text>
			</view>
			<view class="tool-item">
				<image src="../../static/-pinglun.png"></image>
				<text style="margin: 0;">评论</text>
			</view>
			<view class="tool-item">
				<image :src="collection"></image>
				<text style="margin: 0;">收藏</text>
			</view>
			<view class="tool-item">
				<image src="../../static/zhibozhuanfa.png"></image>
				<text style="margin: 0;">转发</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				zanImg:'../../static/hanhan-01-01.png',
				collection:'../../static/shoucang.png'
			}
		},
		onLoad() {

		},
		methods: {
			changeImg(){
				//换一张图片,修改src属性
				if(this.zanImg.indexOf('red')>-1){
					this.zanImg = '../../static/hanhan-01-01.png'
				}else{
					this.zanImg = "../../static/hanhan-red.png"
				}
			},
			start(){
				alert("播放开始")
			},
			jump(a){
				//跳转到指定页面
				uni.navigateTo({
					url:"../search/search"
				})
				//uni.navigateTo({url:""})
			},
			warn(){
				alert("到底了")
			}
		}
	}
</script>

<style>
	.tool-item{
		display: flex;
		flex-direction: column;
		margin: 10px 0;
	}
	.tool-box{
		position: absolute;
		right: 15px;
		bottom: 10px;
		z-index: 9;
	}
	video{
		width: 100%;
		height: 800px;
		position: absolute;
		top: 0;
	}
	.navBox{
		position: absolute;
		width: calc(100% - 20px);
		z-index: 99;
		padding: 10px;
		display: flex;
		justify-content:space-between ;
	}
	text{
		margin: 0 10px;
		color: #FFFFFF;
		line-height: 2;
	}
	page{
		background-color: #000000;
	}
	image{
		width: 30px;
		height: 30px;
	}
</style>
